<template>
  <div>
    <div>
      <x-header style="background-color:#10aeff;">我的设备</x-header>
      <load-more v-if="devices" tip="暂无设备" :show-loading="false" background-color="#fbf9fe">
      </load-more>
      <div style="padding:0 10px" v-for="device in data">
        <load-more :tip="device.brand +'-'+ device.kind_name +'-'+device.model" :show-loading="false" background-color="#fbf9fe"></load-more>

        <x-table :cell-bordered="true" :content-bordered="true" style="background-color:#fff;padding:0 10px">
          <div v-if="device.device_peizhi.length">
            <thead>
              <tr style="background-color: #F7F7F7">
                <th>部件</th>
                <th>信息</th>
                <th>数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in device.device_peizhi" :key="item.id">
                <td style="width:80px">{{ item.Name}}</td>
                <td>{{ item.Notes }}</td>
                <td style="width:50px">{{ item.Number}}</td>
              </tr>
            </tbody>
          </div>
        </x-table>
      </div>
    </div>
    <div v-transfer-dom>
      <loading :show="show" text="加载中"></loading>
    </div>
  </div>
</template>

<script>
import { XTable, LoadMore, XHeader, TransferDom, Loading } from "vux";
import axios from "axios";
export default {
  directives: {
    TransferDom
  },
  components: {
    XTable,
    LoadMore,
    XHeader,
    Loading
  },
  data() {
    return {
      data: [],
      show: true,
      devices: this.$store.state.info.deviceList.length == 0 ? true : false
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      for (const key in this.$store.state.info.deviceList) {
        let device = {};
        device.id = this.$store.state.info.deviceList[key].id;
        device.brand = this.$store.state.info.deviceList[key].brand;
        device.serial_number = this.$store.state.info.deviceList[
          key
        ].serial_number;
        device.model = this.$store.state.info.deviceList[key].model;
        device.kind_code = this.$store.state.info.deviceList[key].kind_code;
        device.kind_name = this.$store.state.info.deviceList[key].kind_name;
        device.device_peizhi = [];

        if (this.$store.state.info.deviceList[key].device_peizhi) {
          let peizhi = this.$store.state.info.deviceList[
            key
          ].device_peizhi.replace(/'/g, '"');
          device.device_peizhi = JSON.parse(peizhi);
        }
        if (
          this.$store.state.info.deviceList[key].brand == "Lenovo" &&
          this.$store.state.info.deviceList[key].kind_code == "C" &&
          !this.$store.state.info.deviceList[key].device_peizhi
        ) {
          let instance = axios.create({
            headers: { "content-type": "application/json" }
          });
          try {
            let info = await instance.post(
              `http://192.168.10.19:4000/graphql`,
              {
                query: `{info (QueryType:"peizhi",ProductSn:"${
                  device.serial_number
                }")}`
              }
            );
            device.device_peizhi = JSON.parse(info.data.data.info).result;
            if (device.device_peizhi.length) {
              let peizhi = JSON.stringify(device.device_peizhi);
              peizhi = peizhi.replace(/\"/g, "'");
              await instance.post(`http://192.168.10.19:4000/graphql`, {
                query: `mutation{deviceUpdatePeizhi(id:${
                  device.id
                },device_peizhi:"${peizhi}")}`
              });
            }
          } catch (error) {
            console.error(error);
          }
        }
        this.data.push(device);
      }
      this.show = false;
    }
  }
};
</script>





